<!--考生答题界面-->
<template>
  <el-container>
    <el-header style="background-color: rgb(121, 181, 236); padding-top: 15px">
      <span class="iconfont icon-menufold icon20"
        >{{ this.examData.type }}-{{ this.examData.source }}  {{this.$store.state.common.id}}</span
      >
      <el-popover
        placement="top-start"
        title="准考证号:"
        width="200"
        trigger="hover"
        :content="this.examData.source"
        style="float: right"
      >
        <el-button
          slot="reference"
          style="background-color: rgb(121, 181, 236)"
          >{{ this.examData.source }}</el-button
        >
      </el-popover>
    </el-header>
    <el-container>
      <el-aside width="300px">
        <!--左边题目编号区-->

        <div class="l-bottom">
          <span class="left">
            <span class="l-top"> 题目编号 </span>
          </span>
          <span v-for="(list, i) in dataList" :key="i">
            <el-button @click="index = i">{{ i + 1 }}</el-button>
          </span>

          <div class="final" @click="commit()">结束考试</div>
        </div>
      </el-aside>
      <el-main style="background-color: rgb(179, 189, 187); padding-top: 15px">
        <!--右边选择答题区-->

        <div class="right">
          <div class="title">
            <span class="auto-right"> 倒计时：{{ time }} 分钟 </span>
            <span class="auto-right"> 全卷共{{ dataList.length }}题 </span>
          </div>
          <!-- 题目区域 -->
          <div class="content">
            <div>
              <!-- 题目 -->
              <p class="topic">
                <span>{{ index + 1 }}.</span>
                <span>{{ dataList[index].question.question }} </span>
              </p>

              <!-- 选择题 -->
              <div v-if="dataList[index].questionType == 1">
                <el-radio-group v-model="radio[index]">
                  <el-radio label="A"
                    >A: {{ dataList[index].question.answera }}</el-radio
                  >
                  <el-radio label="B"
                    >B: {{ dataList[index].question.answerb }}</el-radio
                  >
                  <el-radio label="C"
                    >C: {{ dataList[index].question.answerc }}</el-radio
                  >
                  <el-radio label="D"
                    >D: {{ dataList[index].question.answerd }}</el-radio
                  >
                  <el-radio
                    label="E"
                    v-if="dataList[index].question.answere != null"
                    >E: {{ dataList[index].question.answere }}</el-radio
                  >
                  <el-radio
                    label="F"
                    v-if="dataList[index].question.answerf != null"
                    >F: {{ dataList[index].question.answerf }}</el-radio
                  >
                </el-radio-group>
              </div>

              <!-- 填空题 -->
              <div class="fill" v-if="dataList[index].questionType == 2">
                <p>请输入填空题答案，每个空格间用,分隔</p>
                <el-input
                  placeholder="请填在此处"
                  v-model="radio[index]"
                  clearable
                >
                </el-input>
              </div>

              <!-- 判断题 -->
              <div class="judge" v-if="dataList[index].questionType == 3">
                <el-radio-group v-model="radio[index]">
                  <el-radio label="T">正确</el-radio>
                  <el-radio label="F">错误</el-radio>
                </el-radio-group>
              </div>
            </div>
          </div>

          <!-- 上一题，下一题，标记  -->
          <div class="operation">
            <div class="end">
              <button @click="previous()">上一题</button>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <button @click="next()">下一题 </button>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import store from "@/store";
import { mapState } from "vuex";
export default {
  store,
  data() {
    return {
      id: "", //考试信息的id
      dataList: {}, //获取到的考试题目List

      startTime: null, //考试开始时间
      endTime: null, //考试结束时间
      time: null, //考试持续时间

      bg_flag: false, //已答标识符,已答改变背景色

      radio: [], //保存考生所有选择题的选项
      index: 0, //全局index
      userInfo: {}, //用户信息

      examData: {}, //考试信息数据
      finalScore: 0, //答题总分数
    };
  },

  created() {
    this.getExamData();
    // this.getCookies();
    this.showTime();
  },
  methods: {
    getTime(date) {
      //日期格式化
      let year = date.getFullYear();
      let month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    },

    
    
    getCookies() {
      //获取cookie
      this.userInfo.name = this.$cookies.get("cname");
      this.userInfo.id = this.$cookies.get("cid");
    },

    //获取题目信息
    getDataList(examData) {
      this.$http({
        url: this.$http.adornUrl("/exam/papermanage/paperList"),
        method: "get",
      }).then(({ data }) => {
        if (data && data.code === 0) {
          data.paperInfos.forEach((item) => {
            if (item.paperId === examData.paperid) {
              this.dataList = item.children;
            }
          });
        } else {
          this.dataList = [];
        }
      });
    },

    //获取当前试卷所有信息
    getExamData() {
      let date = new Date();
      this.startTime = this.getTime(date);
      this.id = this.$route.query.id; //获取路由传递过来的试卷编号
      this.$http({
        url: this.$http.adornUrl(`/exam/exammanage/info/${this.id}`),
        method: "get",
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.examData = data.examManage;
          this.time = this.examData.totaltime;
          this.getDataList(this.examData);
        }
      });
    },
    //上一题
    previous() {
      this.index--;
      if (this.index < 0) {
        this.index = 0;
      }
    },
    //下一题
    next() {
      this.index++;
      if (this.index > this.dataList.length - 1) {
        this.index = this.dataList.length - 1;
      }
    },

    //答案提交计算分数
    commit() {
      //计算总分数
      this.radio.forEach((item, i) => {
        if (item != null) {
          console.log(item);
          if (item === this.dataList[i].question.answer) {
            this.finalScore += this.dataList[i].question.score;
          }
        }
      });
      console.log("总成绩为=" + this.finalScore);


      this.$confirm("是否交卷", "友情提示", {
        confirmButtonText: "立即交卷",
        cancelButtonText: "再检查一下",
        type: "warning",
      })
        .then(() => {
          console.log("交卷");
          let date = new Date();
          this.endTime = this.getTime(date);
          let answerDate = this.endTime.substr(0, 10);
          console.log(answerDate);

          //提交成绩信息
          this.$http({
            url: this.$http.adornUrl("/exam/score/save"),
            method: "post",
            data: this.$http.adornData({
              examcode: this.examData.examcode, //考试编号
              studentid: this.$store.state.student.studentId, //学号
              subject: this.examData.source, //课程名称
              etscore: this.finalScore, //答题成绩
              answerdate: answerDate, //答题日期
            }),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$router.replace({
                name: "answerScore",
                query: {
                  finalScore: this.finalScore,
                  startTime: this.startTime,
                  endTime: this.endTime,
                  id:this.id,
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {
          console.log("继续答题");
        });
    },

    //倒计时
    showTime() {
      setInterval(() => {
        this.time -= 1;
        if (this.time == 10) {
          this.$message({
            type: "error",
            message: "考生注意,考试时间还剩10分钟！！！",
          });
        }
        if (this.time == 0) {
          this.$message({
            type: "error",
            message: "考试时间已到,自动交卷",
          });
          this.commit();
        }
      }, 1000 * 60);
    },
  },
};
</script>

<style lang="scss">
.iconfont.icon-time {
  color: #2776df;
  margin: 0px 6px 0px 20px;
}
.analysis {
  margin-top: 20px;
  .right {
    color: #2776df;
    font-size: 18px;
    border: 1px solid #2776df;
    padding: 0px 6px;
    border-radius: 4px;
    margin-left: 20px;
  }
  ul li:nth-child(2) {
    margin: 20px 0px;
  }
  ul li:nth-child(3) {
    padding: 10px;
    background-color: #d3c6c9;
    border-radius: 4px;
  }
}
.analysis span:nth-child(1) {
  font-size: 18px;
}
.mark {
  position: absolute;
  width: 4px;
  height: 4px;
  content: "";
  background-color: red;
  border-radius: 50%;
  top: 0px;
  left: 22px;
}
.border {
  position: relative;
  border: 1px solid #ff90aa !important;
}
.bg {
  background-color: #5188b8 !important;
}
.fill .el-input {
  display: inline-flex;
  width: 150px;
  margin-left: 20px;
  .el-input__inner {
    border: 1px solid transparent;
    border-bottom: 1px solid #eee;
    padding-left: 20px;
  }
}
/* slider过渡效果 */
.slider-fade-enter-active {
  transition: all 0.3s ease;
}
.slider-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slider-fade-enter,
.slider-fade-leave-to {
  transform: translateX(-100px);
  opacity: 0;
}

.operation .end li:nth-child(2) {
  display: flex;

  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgb(39, 118, 223);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  color: #fff;
}
.operation .end li {
  cursor: pointer;
  margin: 0 100px;
}
.operation {
  background-color: #fff;
  border-radius: 4px;
  padding: 10px 0px;
  margin-right: 10px;
}
.operation .end {
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(39, 118, 223);
  margin: 20px;
}
.content .number {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  background-color: rgb(39, 118, 223);
  border-radius: 4px;
  margin-right: 4px;
}
.content {
  padding: 0px 20px;
}
.content .topic {
  padding: 20px 0px;
  padding-top: 30px;
}
.right .content {
  background-color: #fff;
  margin: 10px;
  margin-left: 0px;
  height: 470px;
}
.content .el-radio-group label {
  color: #000;
  margin: 5px 0px;
}
.content .el-radio-group {
  display: flex;
  flex-direction: column;
}
.right .title p {
  margin-left: 20px;
}
.flexarea {
  display: flex;
}
.flexarea .right {
  flex: 1;
}
.auto-right {
  margin-left: auto;
  color: #2776df;
  margin-right: 10px;
}
.right .title {
  margin-right: 10px;
  padding-right: 30px;
  display: flex;
  margin-top: 10px;
  background-color: #fff;
  height: 50px;
  line-height: 50px;
}
.clearfix {
  clear: both;
}
.l-bottom .final {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  background-color: rgb(39, 118, 223);
  width: 240px;
  margin: 20px 0px 20px 10px;
  border-radius: 4px;
  height: 30px;
  line-height: 30px;
  color: #fff;
  margin-top: 22px;
}
#answer .left .item {
  padding: 0px;
  font-size: 16px;
}
.l-bottom {
  border-radius: 4px;
  background-color: #fff;
}
.l-bottom .item p {
  margin-bottom: 15px;
  margin-top: 10px;
  color: #000;
  margin-left: 10px;
  letter-spacing: 2px;
}
.l-bottom .item li {
  width: 15%;
  margin-left: 5px;
  margin-bottom: 10px;
}
.l-bottom .item {
  display: flex;
  flex-direction: column;
}
.l-bottom .item ul {
  width: 100%;
  margin-bottom: -8px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.l-bottom .item ul li a {
  position: relative;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #eee;
  text-align: center;
  color: #000;
  font-size: 16px;
}
.left .l-top {
  display: flex;
  justify-content: space-around;
  padding: 16px 0px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 10px;
  background-color: rgb(197, 197, 223);
}
.left {
  // width: 250px;
  // height: 100%;
  margin: 10px 10px 0px 10px;
}
.left .l-top li:nth-child(2) a {
  border: 1px solid #eee;
}
.left .l-top li:nth-child(3) a {
  background-color: #5188b8;
  border: none;
}
.left .l-top li:nth-child(4) a {
  position: relative;
  border: 1px solid #eee;
}
.left .l-top li:nth-child(4) a::before {
  width: 4px;
  height: 4px;
  content: " ";
  position: absolute;
  background-color: red;
  border-radius: 50%;
  top: 0px;
  left: 16px;
}
.left .l-top li {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.left .l-top li a {
  display: inline-block;
  padding: 10px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #ff90aa;
}
#answer .top {
  background-color: rgb(39, 118, 223);
}
#answer .item {
  color: #fff;
  display: flex;
  padding: 20px;
  font-size: 20px;
}
#answer .top .item li:nth-child(1) {
  margin-right: 10px;
}
#answer .top .item li:nth-child(3) {
  position: relative;
  margin-left: auto;
}
#answer {
  padding-bottom: 30px;
}
.icon20 {
  font-size: 20px;
  font-weight: bold;
}
.item .msg {
  padding: 10px 15px;
  border-radius: 4px;
  top: 47px;
  right: -30px;
  color: #6c757d;
  position: absolute;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background-color: #fff;
}
.item .msg p {
  font-size: 16px;
  width: 200px;
  text-align: left;
}

.button {
  margin: 2px;
  padding: 10px 15px 10px 15px;
  border-radius: 100%;
  border: 1px solid rgba(30, 30, 31, 0.15);
  background-color: rgba(207, 199, 199, 0);
}
</style>
